<template>
    <div class="itemFormBox" :class="{'disabled':disabled,'noIcon':!icon}">
        <i :class="'iconfont '+icon"></i>
        <label v-if="label">{{label}}</label>
        <input :type="type" :disabled="disabled" :placeholder="placeholder" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>
        <slot name="right"/>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
export default {
    props:{
        modelValue:String,
        type:{
            type:String,
            default:()=>"text"
        },
        label:String,
        icon:String,
        placeholder:String,
        disabled:{  // 是否可用
          type:Boolean,
          default:()=>false
        },
    },
    setup(props,context){
        const {proxy} = getCurrentInstance()

        const getVal = val=> context.emit('input',val)

        return{
            getVal
        }
    }
}
</script>

<style lang="scss" scoped>
    .itemFormBox{
        border-bottom: 1px solid var(--baseColor);
        height: 110px;
        width: 100%;
        overflow: hidden;
        display: flex;
        position: relative;
        z-index: 10;
        label{
           width: 120px; 
           font-size: 28px;
           color: #fff;
           font-weight: 400;
           line-height: 110px;
        }
        &.disabled{
            background: #fafafa;
        }
        &.noIcon{
            i{
                display: none;
            }
            input{
                padding-left: 40px;
            }
        }
        i{
            display: flex;
            width: 120px;
            height: 100%;
            font-size: 40px;
            justify-content: center; 
            align-items: center; 
            color: #333; 
        }
        input{
            flex: 1;
            border: 0;
            width: 100%;
            height: 100%;
            padding: 0 40px 0 0 ;
            font-size: 28px;
            color: #fff;
            background: none;
            &:disabled{
                background: #fafafa;
                color: #999;
            }
            &::-webkit-input-placeholder { /* Edge */
                color: rgba(255, 255, 255, 0.5);
            }
            &:-ms-input-placeholder { /* Internet Explorer 10-11 */
                color: rgba(255, 255, 255, 0.5);
            }
            &::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }
        }
    }
</style>